<script>
    import {onMount} from "svelte";
    import Button from "@smui/button";

    let title ;
    let content ;
    export let onYes = () => {
    };
    export let onClose = () => {
    };

    let showDialog = false;

    function openDialog(mtitle, mcontent) {
        title = mtitle;
        content = mcontent;
        showDialog = true;
    }

    onMount(e => {
        // openDialog()
    })

    function closeDialog() {
        showDialog = false;
        onClose();
    }

    function confirm() {
        closeDialog();
        onYes();
    }

    export {openDialog, closeDialog};
</script>

<style>
    .dialog-container {
        z-index: 9999;
        display: flex;
        justify-content: center;
        align-items: center;
        position: fixed;
        top: 0;
        left: 0;
        width: 100vw;
        height: 100vh;
        background: rgba(0, 0, 0, 0.5);
    }

    .dialog {
        background: #fff;
        padding: 20px;
        border-radius: 5px;
        min-width: 300px;
    }

    .dialog-header {
        font-size: 1.2em;
        margin-bottom: 10px;
    }

    .dialog-content {
        margin-bottom: 20px;
    }

    .dialog-footer {
        display: flex;
        justify-content: flex-end;
    }

    :global(.dialog-footer button) {
        margin-left: 10px;
    }
</style>
{#key content}
    {#if showDialog}
        <div class="dialog-container">
            <div class="dialog">
                <div class="dialog-header">{title}</div>
                <div class="dialog-content">{content}</div>
                <div class="dialog-footer">
                    <Button on:click={closeDialog}>关闭</Button>
                    <Button variant="raised" on:click={confirm}>确认</Button>
                </div>
            </div>
        </div>
    {/if}
{/key}